<template>
  <div>
    <div class="md-box">
      <div class="md-box-left" v-html="result"></div>
      <div class="md-box-right" ref="markdown"></div>
    </div>
  </div>
</template>

<script>
import markdownIt from "markdown-it";
import mdContainer from "markdown-it-container";

import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
import * as monaco from "monaco-editor";
import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution";
import "monaco-editor/esm/vs/editor/contrib/find/findController";

const md = markdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '<pre class="hljs"><code>' +
          hljs.highlight(lang, str, true).value +
          "</code></pre>"
        );
        // eslint-disable-next-line no-empty
      } catch (__) {}
    }

    return (
      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
    );
  },
});

md.use(mdContainer, "demo", {
  validate(params) {
    console.log("validate", params.trim().match(/^demo\s*(.*)$/));
    return params.trim().match(/^demo\s*(.*)$/);
  },
  render(tokens, idx) {
    const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
    console.log("mmmm", m);
    if (tokens[idx].nesting === 1) {
      console.log("demo render", tokens[idx], idx);
      const description = m && m.length > 1 ? m[1] : "";
      console.log(description);
      return (
        '<pre class="hljs"><code>' +
        hljs.highlight("html", description, true).value +
        "</code></pre>"
      );
    }
    return "";
  },
});

// md.use(function (md) {
//   const defaultRender = md.renderer.rules.fence;
//   // 重写渲染
//   md.renderer.rules.fence = (tokens, idx, options, env, self) => {
//     const token = tokens[idx];
//     console.log(token);
//     // 判断该 fence 是否在 :::demo 内

//     if (token.info === "html") {
//       return `<template slot="highlight"><pre v-pre><code class="html">我重写了fence的内容</code></pre></template>`;
//     }
//     return defaultRender(tokens, idx, options, env, self);
//   };
// });

export default {
  data() {
    return {
      result: "",
      content:
        ":::demo /common/bar/simplebar.vue\n <components-my-button></components-my-button>\n ",
    };
  },

  mounted() {
    // 初始化编辑器，确保dom已经渲染
    this.editor = monaco.editor.create(this.$refs["markdown"], {
      value: this.content, //编辑器初始显示文字
      language: "markdown", //语言支持自行查阅demo
      automaticLayout: true, //自动布局
      // theme: "vs-dark", //官方自带三种主题vs, hc-black, or vs-dark,
      selectOnLineNumbers: true, //显示行号
      roundedSelection: false,
      readOnly: false, // 只读
      cursorStyle: "line", //光标样式
      glyphMargin: true, // 字形边缘
      useTabStops: false,
      // fontSize: 28,       //字体大小
      autoIndent: true, //自动布局
      quickSuggestionsDelay: 500, //代码提示延时
    });

    this.editor.onKeyDown(() => {
      let content = this.editor.getValue();
      // console.log(content);
      this.result = md.render(content);
    });
    let content = this.editor.getValue();
    this.result = md.render(content);
  },
  beforeDestroy() {
    this.editor.dispose(); // 使用完后销毁
  },
};
</script>

<style scoped>
.md-box {
  width: 100%;
  height: 500px;
  display: flex;
}
.md-box-left {
  border: 1px solid #333;
  flex: 1;
}
.md-box-right {
  border: 1px solid #89f;
  flex: 1;
}
</style>